
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSE音频播放Demo</title>
  <!-- 引入jQuery库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 全局样式设置 */
    body {
      font-family: Arial, sans-serif; /* 设置字体 */
      max-width: 800px; /* 最大宽度限制 */
      margin: 0 auto; /* 居中显示 */
      padding: 20px; /* 内边距 */
      background-color: #f5f5f5; /* 背景颜色 */
    }
    
    /* 容器样式 */
    .container {
      background-color: white; /* 白色背景 */
      padding: 30px; /* 内边距 */
      border-radius: 10px; /* 圆角 */
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影效果 */
    }
    
    /* 标题样式 */
    h1 {
      color: #333; /* 文字颜色 */
      text-align: center; /* 居中对齐 */
    }
    
    /* 表单组样式 */
    .form-group {
      margin-bottom: 20px; /* 底部外边距 */
    }
    
    /* 标签样式 */
    label {
      display: block; /* 块级元素 */
      margin-bottom: 5px; /* 底部外边距 */
      font-weight: bold; /* 粗体 */
    }
    
    /* 输入框和文本域样式 */
    input, textarea {
      width: 100%; /* 宽度100% */
      padding: 10px; /* 内边距 */
      border: 1px solid #ddd; /* 边框 */
      border-radius: 5px; /* 圆角 */
      box-sizing: border-box; /* 盒模型 */
    }
    
    /* 文本域特殊样式 */
    textarea {
      height: 150px; /* 高度 */
      resize: vertical; /* 允许垂直调整大小 */
    }
    
    /* 按钮样式 */
    button {
      background-color: #007bff; /* 背景颜色 */
      color: white; /* 文字颜色 */
      padding: 12px 24px; /* 内边距 */
      border: none; /* 无边框 */
      border-radius: 5px; /* 圆角 */
      cursor: pointer; /* 鼠标指针 */
      font-size: 16px; /* 字体大小 */
      width: 100%; /* 宽度100% */
    }
    
    /* 按钮悬停效果 */
    button:hover {
      background-color: #0056b3; /* 悬停背景颜色 */
    }
    
    /* 按钮禁用状态 */
    button:disabled {
      background-color: #ccc; /* 禁用背景颜色 */
      cursor: not-allowed; /* 禁用鼠标指针 */
    }
    
    /* 重新播放按钮样式 */
    #replayBtn {
      background-color: #28a745; /* 成功绿色 */
      margin-top: 10px;
    }
    
    /* 重新播放按钮悬停效果 */
    #replayBtn:hover:not(:disabled) {
      background-color: #218838;
    }
    
    /* 状态显示样式 */
    .status {
      margin-top: 20px; /* 顶部外边距 */
      padding: 15px; /* 内边距 */
      border-radius: 5px; /* 圆角 */
      text-align: center; /* 居中对齐 */
    }
    
    /* 连接中状态样式 */
    .status.connecting {
      background-color: #fff3cd; /* 连接中背景颜色 */
      color: #856404; /* 连接中文字颜色 */
    }
    
    /* 已连接状态样式 */
    .status.connected {
      background-color: #d4edda; /* 已连接背景颜色 */
      color: #155724; /* 已连接文字颜色 */
    }
    
    /* 错误状态样式 */
    .status.error {
      background-color: #f8d7da; /* 错误背景颜色 */
      color: #721c24; /* 错误文字颜色 */
    }
    
    /* 音频容器样式 */
    .audio-container {
      margin-top: 20px; /* 顶部外边距 */
      text-align: center; /* 居中对齐 */
    }
    
    /* 音频块信息样式 */
    .chunk-info {
      margin-top: 10px; /* 顶部外边距 */
      font-size: 14px; /* 字体大小 */
      color: #666; /* 文字颜色 */
    }
  </style>
</head>
<body>
<div class="container">
  <h1>SSE音频播放Demo</h1>
  <!-- 表单元素，用于输入TTS参数 -->
  <form id="ttsForm">
    <!-- 说话人ID输入框 -->
    <div class="form-group">
      <label for="speakerId">说话人ID:</label>
      <input type="text" id="speakerId" value="S_bdVohz3I1" required>
    </div>

    <!-- 用户ID输入框 -->
    <div class="form-group">
      <label for="uid">用户ID:</label>
      <input type="text" id="uid" value="6" required>
    </div>

    <!-- 文本内容输入框 -->
    <div class="form-group">
      <label for="text">文本内容:</label>
      <textarea id="text" required>欢迎来到故宫《听宝贝说》！小侦探时间到啦——嘿，各位！我是明成化斗彩三秋杯！跟我你们说啊，我身上可藏着几个让大家猜了好久的谜题，今天咱们就一起化身小侦探，顺着我身上的线索，把这三个"千年陶瓷秘密"一个个揪出来！准备好了没？走起！第一个问题，嗯……你们知道我为什么叫"三秋杯"吗？来来来，看看我外壁上这些图案，有花有石头，还有蝴蝶飞来飞去的。说实话，一开始我自己也没搞懂这画的是哪个季节，后来听专家们一聊才知道——原来这是秋天的景色！因为同时有花、石、蝴蝶这三个元素，干脆就叫我"三秋杯"啦。是不是有点意思？你们之前猜到了吗？第二个谜：我这种"斗彩"到底是咋做出来的？说起这个制作过程，那可真是费老劲了。工匠们得先用青花给我勾线，烧一遍；然后再一点点往上加红彩、黄彩这些颜色，再回炉烧一次，呃……来来回回折腾好几趟。整个过程，就跟解一道巨难的题似的，每一步都得特别小心。不过现在看看，这么费功夫还挺值，不然我哪能这么好看呀，对吧？第三个问题：我是怎么来到故宫的？这事儿就得提孙瀛洲先生了。这位老先生人可真好，不光收了我，还把我和其他两千多件陶瓷一块儿捐给了故宫。现在想想，能在这儿落脚真是我的福气，每天能见到这么多游客，还能跟其他文物小伙伴做邻居，这小日子，过得那叫一个滋润～呃......你们知道吗？孙先生还总结了不少鉴定秘诀，就跟侦探的破案笔记一样，到现在都超好用！小侦探们，你们发现没？其实每一件文物啊……都是一个等着被讲出来的故事。只要我们认真看、仔细听，就能发现那些藏在时间里的秘密。说不定，下一个发现关键线索的小侦探，就是你哦！好啦！今天的《听宝贝说》就先聊到这儿，咱们下个故事再见咯，拜拜～</textarea>
    </div>

    <!-- 提交按钮 -->
    <button type="submit" id="submitBtn">开始播放</button>

    <button type="button" id="pauseBtn" disabled>暂停播放</button>
    
    <button type="button" id="replayBtn" disabled>重新播放</button>

  </form>
  

  <!-- 状态显示区域 -->
  <div id="status" class="status" style="display: none;"></div>

  <!-- 音频播放器和信息显示区域 -->
  <div class="audio-container">
    <audio id="audioPlayer" controls style="width: 100%;"></audio>
    <audio id="bgm" controls src="video/bgm.mp3" preload="auto" style="width: 100%;"></audio>

    <!-- 缓存状态显示区域 -->
    <div id="cacheInfo" class="chunk-info" style="color: #007bff; font-weight: bold;"></div>
    <div id="chunkInfo" class="chunk-info"></div>
    <div id="currChunk" class="chunk-info"></div>
  </div>
  
  <!-- 提取的数据信息显示区域 -->
  <div class="info-container" style="margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 5px; border: 1px solid #dee2e6;">
    <h3 style="margin-top: 0; color: #495057;">提取的第一条数据信息</h3>
    <div id="extractedInfo" style="font-family: monospace; white-space: pre-wrap; 
            background-color: #fff; padding: 10px; border-radius: 3px; min-height: 60px;">
      等待数据接收...
    </div>
  </div>
</div>

<!-- 引入SSE音频播放器脚本 -->
<script src="js/sseAudioPlayer.js"></script>

<!-- 初始化和调试脚本 -->
<script>
  $(document).ready(function() {
    console.log('页面加载完成，开始初始化SSEAudioPlayer');
    
    // 确保SSEAudioPlayer类已加载
    if (typeof SSEAudioPlayer === 'undefined') {
      console.error('SSEAudioPlayer类未加载！');
      return;
    }
    
    // 检查是否已有实例
    if (window.sseAudioPlayer) {
      console.log('SSEAudioPlayer实例已存在:', window.sseAudioPlayer);
    } else {
      console.log('手动创建SSEAudioPlayer实例');
      window.sseAudioPlayer = new SSEAudioPlayer();
    }
    
    // 测试暂停按钮是否正确绑定
    $('#pauseBtn').on('click', function() {
      console.log('暂停按钮被点击');
    });
    
    console.log('SSEAudioPlayer初始化完成');
  });
</script>

<!-- 监听并显示提取的数据 -->
<script>
  $(document).on('firstDataExtracted', function(event, data) {
    console.log('接收到提取的数据事件:', data);
    
    let displayText = '提取到的信息:\n';
    displayText += `URL: ${data.url || '未提供'}\n`;
    displayText += `workId: ${data.workId || '未提供'}`;
    
    $('#extractedInfo').text(displayText);
  });
</script>
</body>
</html>